<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓储作业管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">仓储作业管理</div>
            
            <!-- 作业概览 -->
            <div class="operations-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card inbound">
                            <div class="overview-item">
                                <div class="overview-number">{{ operationStats.inboundToday }}</div>
                                <div class="overview-label">今日入库</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card outbound">
                            <div class="overview-item">
                                <div class="overview-number">{{ operationStats.outboundToday }}</div>
                                <div class="overview-label">今日出库</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card sorting">
                            <div class="overview-item">
                                <div class="overview-number">{{ operationStats.sortingTasks }}</div>
                                <div class="overview-label">分拣任务</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card pending">
                            <div class="overview-item">
                                <div class="overview-number">{{ operationStats.pendingTasks }}</div>
                                <div class="overview-label">待处理任务</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="入库验收" name="inbound-inspection">
                    <div class="inbound-section">
                        <div class="operation-tools">
                            <el-button type="primary" @click="createInboundTask">新建入库单</el-button>
                            <el-button type="success" @click="batchInbound">批量入库</el-button>
                            <el-button @click="exportInbound">导出记录</el-button>
                        </div>

                        <el-table :data="inboundData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="taskNo" label="入库单号" width="140"></el-table-column>
                            <el-table-column prop="supplier" label="供应商" width="150"></el-table-column>
                            <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
                            <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
                            <el-table-column prop="temperature" label="验收温度" width="120">
                                <template slot-scope="scope">
                                    <span :style="{color: scope.row.tempStatus === '正常' ? '#67C23A' : '#F56C6C'}">
                                        {{ scope.row.temperature }}°C
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="验收状态" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="getStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="inspector" label="验收员" width="100"></el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="inspectGoods(scope.row)">验收</el-button>
                                    <el-button size="mini" type="primary" @click="confirmInbound(scope.row)">确认入库</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="分拣作业" name="sorting-operations">
                    <div class="sorting-section">
                        <div class="operation-tools">
                            <el-button type="primary" @click="createSortingTask">创建分拣任务</el-button>
                            <el-button type="warning" @click="optimizeRoute">路径优化</el-button>
                            <el-button @click="printPickingList">打印拣货单</el-button>
                        </div>

                        <el-table :data="sortingData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="taskNo" label="分拣单号" width="140"></el-table-column>
                            <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
                            <el-table-column prop="items" label="商品项数" width="100"></el-table-column>
                            <el-table-column prop="priority" label="优先级" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getPriorityType(scope.row.priority)">
                                        {{ scope.row.priority }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="assignee" label="分拣员" width="100"></el-table-column>
                            <el-table-column prop="progress" label="进度" width="120">
                                <template slot-scope="scope">
                                    <el-progress :percentage="scope.row.progress" :status="scope.row.progress === 100 ? 'success' : ''"></el-progress>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getTaskStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewSortingDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="startSorting(scope.row)" v-if="scope.row.status === '待开始'">开始</el-button>
                                    <el-button size="mini" type="success" @click="completeSorting(scope.row)" v-if="scope.row.status === '进行中'">完成</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="出库配货" name="outbound-allocation">
                    <div class="outbound-section">
                        <div class="operation-tools">
                            <el-button type="primary" @click="createOutboundTask">新建出库单</el-button>
                            <el-button type="success" @click="autoAllocate">自动配货</el-button>
                            <el-button @click="printDeliveryNote">打印配送单</el-button>
                        </div>

                        <el-table :data="outboundData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="deliveryNo" label="出库单号" width="140"></el-table-column>
                            <el-table-column prop="customer" label="客户" width="150"></el-table-column>
                            <el-table-column prop="destination" label="配送地址" width="200"></el-table-column>
                            <el-table-column prop="items" label="商品项数" width="100"></el-table-column>
                            <el-table-column prop="totalWeight" label="总重量(kg)" width="120"></el-table-column>
                            <el-table-column prop="vehicle" label="配送车辆" width="120"></el-table-column>
                            <el-table-column prop="status" label="状态" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="getDeliveryStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewOutboundDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="allocateVehicle(scope.row)" v-if="scope.row.status === '待配货'">配车</el-button>
                                    <el-button size="mini" type="success" @click="confirmDelivery(scope.row)" v-if="scope.row.status === '已配货'">确认出库</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'inbound-inspection',
                    operationStats: {
                        inboundToday: 25,
                        outboundToday: 18,
                        sortingTasks: 12,
                        pendingTasks: 8
                    },
                    inboundData: [
                        {
                            taskNo: 'IN20240116001',
                            supplier: '北京新发地',
                            productName: '进口三文鱼',
                            quantity: 50,
                            temperature: -18.5,
                            tempStatus: '正常',
                            status: '待验收',
                            inspector: '张三'
                        },
                        {
                            taskNo: 'IN20240116002',
                            supplier: '山东寿光',
                            productName: '有机蔬菜',
                            quantity: 200,
                            temperature: 2.8,
                            tempStatus: '正常',
                            status: '已验收',
                            inspector: '李四'
                        }
                    ],
                    sortingData: [
                        {
                            taskNo: 'ST20240116001',
                            orderNo: 'ORD001',
                            items: 15,
                            priority: '高',
                            assignee: '王五',
                            progress: 65,
                            status: '进行中'
                        },
                        {
                            taskNo: 'ST20240116002',
                            orderNo: 'ORD002',
                            items: 8,
                            priority: '中',
                            assignee: '赵六',
                            progress: 0,
                            status: '待开始'
                        }
                    ],
                    outboundData: [
                        {
                            deliveryNo: 'OUT20240116001',
                            customer: '北京华联超市',
                            destination: '北京市朝阳区',
                            items: 25,
                            totalWeight: 580,
                            vehicle: '京A12345',
                            status: '已配货'
                        },
                        {
                            deliveryNo: 'OUT20240116002',
                            customer: '上海家乐福',
                            destination: '上海市浦东新区',
                            items: 18,
                            totalWeight: 420,
                            vehicle: '未分配',
                            status: '待配货'
                        }
                    ]
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        '待验收': 'warning',
                        '已验收': 'success',
                        '验收异常': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getPriorityType(priority) {
                    const typeMap = {
                        '高': 'danger',
                        '中': 'warning',
                        '低': 'info'
                    };
                    return typeMap[priority] || 'info';
                },
                getTaskStatusType(status) {
                    const typeMap = {
                        '待开始': 'info',
                        '进行中': 'warning',
                        '已完成': 'success',
                        '异常': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getDeliveryStatusType(status) {
                    const typeMap = {
                        '待配货': 'warning',
                        '已配货': 'primary',
                        '已出库': 'success'
                    };
                    return typeMap[status] || 'info';
                },
                createInboundTask() {
                    this.$message.info('新建入库单功能开发中');
                },
                batchInbound() {
                    this.$message.info('批量入库功能开发中');
                },
                exportInbound() {
                    this.$message.success('入库记录导出成功');
                },
                inspectGoods(row) {
                    this.$message.info('货物验收功能开发中');
                },
                confirmInbound(row) {
                    this.$confirm('确认入库？', '入库确认').then(() => {
                        this.$message.success('入库确认成功');
                    });
                },
                createSortingTask() {
                    this.$message.info('创建分拣任务功能开发中');
                },
                optimizeRoute() {
                    this.$message.info('路径优化功能开发中');
                },
                printPickingList() {
                    this.$message.success('拣货单打印成功');
                },
                viewSortingDetail(row) {
                    this.$message.info('查看分拣详情功能开发中');
                },
                startSorting(row) {
                    row.status = '进行中';
                    this.$message.success('分拣任务已开始');
                },
                completeSorting(row) {
                    row.status = '已完成';
                    row.progress = 100;
                    this.$message.success('分拣任务已完成');
                },
                createOutboundTask() {
                    this.$message.info('新建出库单功能开发中');
                },
                autoAllocate() {
                    this.$message.info('自动配货功能开发中');
                },
                printDeliveryNote() {
                    this.$message.success('配送单打印成功');
                },
                viewOutboundDetail(row) {
                    this.$message.info('查看出库详情功能开发中');
                },
                allocateVehicle(row) {
                    this.$message.info('配车功能开发中');
                },
                confirmDelivery(row) {
                    this.$confirm('确认出库？', '出库确认').then(() => {
                        row.status = '已出库';
                        this.$message.success('出库确认成功');
                    });
                }
            }
        });
    </script>

    <style scoped>
        .operations-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.inbound {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.outbound {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.sorting {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.pending {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .inbound-section, .sorting-section, .outbound-section {
            margin-bottom: 20px;
        }
        
        .operation-tools {
            margin-bottom: 20px;
        }
        
        .operation-tools .el-button {
            margin-right: 10px;
        }
    </style>
</body>
</html>